<template>
  <div class="about">
    <div class="bannder">
      <img src="https://img601.yun300.cn/repository/image/b4eb80d3-446d-4fef-865e-d22a130c8317.jpg?tenantId=215997&viewType=1&k=1642041118000" alt="">
    </div>
    <div class="list">
  <div v-for="(item,index) in list" class="item" :key="index">
  <img :src="item.img" alt="">
  <div class="title">{{ item.name }}</div>
  </div>
</div>
  </div>
</template>
<script>
// @ is an alias to /src

export default {
  name: 'Home',

  data(){
    return{
      list:[
        {
          img:'http://www.tomson-riviera.com/repository/image/f8cf1c18-fced-4011-87c1-1a8878b186c8.jpg',
          name:'清明节'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/f0e9cc69-872a-43d7-9d44-73c2fd4bd82f.jpg',
          name:'愚人节'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/a434b0cd-aaf1-4320-b25e-c363105a6652.jpg',
          name:'春分'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/1f7a3f62-f084-4351-88b1-c5cf93f4bf11.jpg',
          name:'妇女节'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/0d60d9a4-fc60-4830-b109-5487f33e36f2.jpg',
          name:'惊蛰'
        },{
          img:'http://www.tomson-riviera.com/repository/image/9ae431dc-0ba3-44b7-8dd7-698c9d969be8.jpg',
          name:'平安夜'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/4b26b807-4d2b-40f9-8ee0-457e6295478a.jpg',
          name:'冬至'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/543220fb-4fd8-49ec-94df-8ff75a3c1b6b.jpg',
          name:'小雪'

        },
        {
          img:'http://www.tomson-riviera.com/repository/image/f15aa6a0-eb23-4462-b43e-cab526eeabd8.jpg',
          name:'大暑'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/6a26d9e0-f671-4b41-a62e-53d0626ede6a.jpg',
          name:'五四青年节'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/e5a4efe0-83ca-4f14-9c3f-0d223a9beee4.jpeg',
          name:'元宵'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/ad7099e4-4515-4754-9846-9def07d3198c.jpeg',
          name:'除夕'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/7d461cf6-a422-4a19-9ded-50ea22da035a.jpeg',
          name:'初一'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/10e23a34-3ea6-47b5-b76b-9fb7e48159ac.jpeg',
          name:'初五'
        },
        {
          img:'http://www.tomson-riviera.com/repository/image/3182bdf1-e01a-4fe4-b722-a4e302ebc2ab.jpeg',
          name:'初七'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.bannder{
  width: 100%;
  height: 400px;
  img{
    width: 100%;
    height: 100%;
  }
}
.list{
  // display: flex;
  width: 70%;
  // justify-content: space-between;
  margin: 100px auto;
  // flex-wrap: wrap;
  .item{
    width: 300px;
    height: 480px;
    position: relative;
    margin-bottom: 30px;
    display: inline-block;
    margin: 20px;
    img{
      width: 100%;
      height: 100%;
    }
    .title{
      width: 100%;
      height: 50px;
      line-height: 50px;
      color: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
      background: #c5a544;
    }
  }
}

</style>